<template>
  <div style="padding: 16px">
    <el-skeleton :rows="5" :loading="data.isFirst" animated>
      <el-descriptions
        title="字典类别详情"
        direction="vertical"
        :column="3"
        border
      >
        <template #extra>
          <el-button
            @click="events.toggleEdit"
            :type="!data.isEdit ? 'warning' : 'danger'"
            >{{ data.isEdit ? "保存" : "编辑" }}</el-button
          >
        </template>

        <el-descriptions-item width="33%" label="类别名">
          <template v-if="!data.isEdit"> {{ data.data.name }}</template>
          <el-input
            v-show="data.isEdit"
            type="text"
            v-model="data.data.name"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item width="33%" label="关键字">
          <template v-if="!data.isEdit"> {{ data.data.key }}</template>
          <el-input
            v-show="data.isEdit"
            type="text"
            v-model="data.data.key"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item width="33%" label="值">
          <template v-if="!data.isEdit"> {{ data.data.value }}</template>
          <el-input
            v-show="data.isEdit"
            type="text"
            v-model="data.data.value"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="添加人">
          {{ data.data.author }}
        </el-descriptions-item>
        <el-descriptions-item label="添加时间">
          {{ data.data.time }}
        </el-descriptions-item>
        <el-descriptions-item label="最后修改人">
          {{ data.data.update_author }}
        </el-descriptions-item>
        <el-descriptions-item label="子级" :span="3">
          <div style="margin-bottom: 8px">
            <el-button type="primary" @click="events.add">新增</el-button>
          </div>
          <el-table :data="data.data.children">
            <el-table-column
              label="序号"
              type="index"
              width="60"
            ></el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              width="150"
              label="名称"
              prop="name"
            ></el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="值"
              prop="value"
            ></el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="添加人"
              prop="author"
            ></el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="添加时间"
              prop="time"
            ></el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="最后修改时间"
              prop="update_author"
            ></el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="使用次数"
              prop="useCount"
            ></el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              width="150"
              fixed="right"
              label="操作"
              prop="value"
            >
              <template #default="scope">

                <el-popconfirm
                  title="确认删除吗？"
                  v-if="scope.row.useCount === 0"
                  @confirm="events.del_dictionary(scope.row.id)"
                >
                  <template #reference>
                    <el-button size="small" plain type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-descriptions-item>
      </el-descriptions>

      <el-dialog v-model="data.isOpen" title="新增字典" width="800">
        <add_dictionary
          @myclose="events.myclose"
          :data="data.data.id"
        ></add_dictionary>
      </el-dialog>
    </el-skeleton>
  </div>
</template>

<script setup lang="ts">
import {
  del_dictionarys,
  get_Single_Dictionary_Type,
  Update_Dictionarys,
} from "@/api/dictionary/index";
import { notice } from "@/utils/notice";
import type { Dictionary_Detail_Data } from "@/utils/types";
import add_dictionary from "@/components/dictionary/add_dictionary.vue";
import { onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();

const data = reactive<Dictionary_Detail_Data>({
  isFirst: true,
  data: {
    id: "",
    name: "",
    key: "",
    value: "",
    author: "",
    time: "",
    update_author: "",
    children: [],
  },
  isEdit: false,
  isOpen: false,
});

const methods = {
  async bind() {
    const res = await get_Single_Dictionary_Type({
      id: route.params.id.toString(),
    });
    if (res.code === 0) {
      data.data = res.data;
    }
  },
};

const events = {
  myclose() {
    data.isOpen = false;
    methods.bind();
  },
  /**
   * 新增字典
   */
  add() {
    data.isOpen = true;
  },
  // 切换编辑模式
  toggleEdit() {
    if (data.isEdit) {
      events.saveChanges();
    } else {
      data.isEdit = true;
    }
  },
  // 保存更改
  async saveChanges() {
    try {
      const res = await Update_Dictionarys({
        id: data.data.id,
        name: data.data.name,
        key: data.data.key,
        value: data.data.value,
      });
      console.log('Update_Dictionarys response:', res); // 添加调试信息
      if (res.code === 1) {
        notice({ code: 0, message: '字典类别信息更新成功' });
        data.isEdit = false;
      } else {
        notice(res);
      }
    } catch (error) {
      console.error('更新字典类别信息失败', error);
      notice({ code: -1, message: '更新字典类别信息失败' });
    }
    data.isEdit = false;
  },
  async del_dictionary(id: string) {
    const res = await del_dictionarys({
      id: id,
    });
    console.log('del_dictionary response:', res); // 添加调试信息
    notice(res);
    if (res.code === 0) {
      methods.bind();
    }
  },
};

onMounted(async () => {
  await methods.bind();
  data.isFirst = false;
});
</script>

<style scoped></style>



